import React, { Dispatch } from 'react'
import { Layout, Menu, Dropdown, message } from 'antd';
import { connect } from 'react-redux'
import { StoreType } from '../../../../store/types'
import { AuthActionTypes } from '../../../../store/auth/types'
import { logout } from '../../../../store/auth/actions'
import { RouteComponentProps, withRouter } from 'react-router-dom'
import styles from './index.module.scss'

interface StoreComInterface {
  userIcon: string,
  logout: () => Promise<any>
}

interface PropsInterface extends StoreComInterface, Partial<RouteComponentProps> {

}

const HeaderCom = (props: PropsInterface) => {

  const logoutBtnClick = () => {
    props.logout().then(() => {
      message.success('退出成功')
      props.history!.push('/')
    })
  }

  const menu = (
    <Menu>
      <Menu.Item onClick={ () => props.history!.push('/') }>
        主页
      </Menu.Item>
      <Menu.Item onClick={ logoutBtnClick }>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout.Header className={styles['admin-header']}>
      <div className={styles['left-box']}></div>
      <div className={styles['right-box']}>
        <Dropdown overlay={menu}>
          <i className={`${styles['user-icon']} w-image-fill`} style={{ backgroundImage: `url(${props.userIcon})` }}></i>
        </Dropdown>
      </div>
    </Layout.Header>
  )
}

const mapStateToProps = (state: StoreType) => {
  return {
    userIcon: state.auth.icon
  }
}

const mapDispatchToProps = (dispatch: Dispatch<AuthActionTypes>) => {
  return {
    logout: () => dispatch(logout() as any)
  }
}

const classModel = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  {
    forwardRef: true
  }
)(withRouter(HeaderCom as any))
export default classModel